<template>
    <a-modal :title="$t('编辑保护任务')" v-model='isShow' :maskClosable='false' v-dragModal>
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-spin :spinning="loading">
                <a-form-model-item :label="$t('保护任务名称') + ':'" prop="name">
                    <a-input v-model="form.name" :placeholder="$t('Enter') + $t('保护任务名称')" />
                </a-form-model-item>
                <a-form-model-item :label="$t('保护任务描述') + ':'" prop="describe">
                    <a-input v-model="form.describe" :placeholder="$t('Enter') + $t('保护任务描述')" />
                </a-form-model-item>
                <a-form-model-item :label="$t('保护策略选择') + ':'" prop="strategy_id">
                    <a-select disabled v-model="form.strategy_id" :placeholder="$t('Enter') + $t('保护策略选择')">
                        <a-select-option v-for="item of strategyOption" :value="item.id" :key="item.id">
                            {{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item :label="$t('保护目标') + ':'" prop="target_type">
                    <a-radio-group disabled v-model="form.target_type">
                        <a-radio v-for="item of shareGroup" :value="item.value" :key="item.value">{{ item.label }}</a-radio>
                    </a-radio-group>
                </a-form-model-item>
                <a-form-model-item :label="$t('目录选择')" prop="target">
                    <a-input disabled style="width:80%;" v-model="form.target" :placeholder="$t('请输入或选择目录路径')" />
                    <a-button disabled style="margin-left: 16px;" type='primary' @click="handleChoose">
                        {{ $t('浏览') }}
                    </a-button>
                </a-form-model-item>
            </a-spin>
        </a-form-model>
        <template slot="footer">
            <a-button type='primary' @click="handleCreate">{{ $t('保存') }}</a-button>
            <a-button @click="handleClose">{{ $t('Cancel') }}</a-button>
        </template>

        <chooseDirectory ref="directoryRef" />

    </a-modal>
</template>

<script>
import chooseDirectory from '../../storage_mgr/filesystem/directory/chooseDirectory.vue';
export default {
    data() {
        return {
            isShow: false,
            loading: false,
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            form: {
                name: '',
                describe: '',
                strategy_type: 1,
                strategy_id: undefined,
                target_type: 2,
                target: '',
            },
            rules: {
                name: [
                    { required: true, message: this.$t('Enter') + this.$t('保护任务名称'), trigger: 'blur' },
                    { pattern: /^[A-Za-z0-9_]{1,128}$/, message: this.$t('支持大小写英文字母 + 数字 + 英文下划线，1-128 个字符'), trigger: 'blur' }
                ],
                describe: [
                    { min: 1, max: 256, message: this.$t('请输入长度为1-256的字符'), trigger: 'blur' },
                ],
                strategy_id: [
                    { required: true, message: this.$t('Choose') + this.$t('保护策略选择'), trigger: 'change' }
                ],
                target_type: [
                    { required: true, message: this.$t('Enter') + this.$t('保护目标'), trigger: 'change' }
                ],
                target: [
                    { required: true, validator: (rules, value, callback) => { this.pathValidator(rules, value, callback) }, trigger: 'blur' },
                ],
            },
            strategyOption: [],
            shareGroup: [
                { value: 2, label: '文件' },
            ],
        };
    },
    components: { chooseDirectory },
    methods: {
        chooseDirectory(item) {
            console.log('item', item)
        },
        handleChoose() {
            this.$refs.directoryRef.isShow = true
        },
        handleCreate() {
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    this.loading = true
                    const { id, name, describe } = this.form
                    const { data } = await this.$api.data.modifyTaskApi({ id, name, describe })
                    this.model(data.id) //返回模板
                    this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') {
                        this.$emit('get-list')
                        this.handleClose()
                    }
                    this.loading = false
                } else {
                    return false;
                }
            });
        },
        handleClose() {
            this.$refs['ruleForm'].resetFields();
            this.isShow = false
        },
        pathValidator(rule, value, callback) {
            if (value == '') callback(this.$t('Choose') + this.$t('目录路径'))
            // if (value == '/') callback()
            else {
                const reg = /^(\/[\w.-]+)+\/?$/
                console.log(reg.test(value))
                if (!reg.test(value)) callback(this.$t('Choose') + this.$t('请输入或选择目录路径'))
                else callback()
            }
        },
    }
}
</script>